<template>
  <div class="app-container draggable-content">
    <VueDraggable ref="el" v-model="list" :animation="150" group="people" ghostClass="ghost" class="common">
      <div v-for="item in list" :key="item.id" class="draggable-item pink">
        {{ item.name }}
      </div>
    </VueDraggable>
    <VueDraggable ref="el" v-model="blueList" :animation="150" group="people" ghostClass="ghost" class="common row">
      <div v-for="item in blueList" :key="item.id" class="draggable-item  blue">
        {{ item.name }}
      </div>
    </VueDraggable>

  </div>
</template>

<script setup name="Index">
import { VueDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
const blueList = ref([
  {
    name: 'Joao-2',
    id: '1-2'
  },
  {
    name: 'Jean-2',
    id: '2-2'
  },
  {
    name: 'Johanna-2',
    id: '3-2'
  },
  {
    name: 'Juan-2',
    id: '4-2'
  }
])
</script>
<style lang="scss" scoped>
.draggable-content {
  .common {
    width: 420px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .draggable-item {
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      margin-bottom: 20px;
      cursor: pointer;
    }
    .pink {
      background: pink;
    }
    .blue {
      height: 46px;
      line-height: 46px;
      background: blue;
      margin-right: 10px;
    }
  }
  .row {
    width: 900px;
    flex-wrap: nowrap;
  }
}
</style>
